<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树形菜单</title>
    <link rel="stylesheet" href="/static/layuimini/layui/css/layui.css">
    <link rel="stylesheet" href="/static/layuimini/css/page.css">
    <style>
        .demo-side {
            position: relative;
            transition: all .3s;
        }

        .demo-side.show {
            padding-left: 120px;
            position: relative;
        }

        .demo-side:before {
            content: "假设这是侧边栏, treeTable使用了与layui数据表格完全不同的列宽分配方式, 由浏览器来分配, 所以当容器宽度变化后会自动适应, 对单页面系统非常友好";
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -90px;
            width: 105px;
            visibility: hidden;
            line-height: 1.5;
        }

        .demo-side.show:before {
            visibility: visible;
        }
		.row-edit{
			color: #fff!important;
			background-color: #009688!important;
		}
		
		.row-delete{
			color: #fff!important;
			background-color: #FF5722!important;
		}
    </style>
</head>
<body>
<div class="page_container" id="view">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend>{{d.title}}</legend>
    </fieldset>
    <div class="layui-btn-container" style="display: inline-block;">
    	<div class="layui-btn-group">
                <button id="btnExpandAll" class="layui-btn layui-btn-primary layui-btn-sm" >全部展开</button>
                <button id="btnFoldAll" class="layui-btn layui-btn-primary layui-btn-sm" >全部折叠</button>
        </div>
        
    </div>
    <div style="float: right">
        <input class="layui-input" id="edtSearch" value="" placeholder="输入关键字"
               style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
        <div class="layui-btn-container" style="display: inline-block;">
            <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#xe615;</i>搜索
            </button>
            <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                <i class="layui-icon">&#x1006;</i>清除搜索
            </button>
        </div>
    </div>
    
    <div class="demo-side">
        <table id="demoTreeTb"></table>
    </div>
	<!-- 表格操作列 -->
	<script type="text/html" id="tbBar">
	  {{#  arr_foreach(d.row_toolbar, function(k1, v1){ }}
	  <a class="layui-btn layui-btn-primary layui-btn-xs  row-{{v1.event}}" lay-event="{{v1.event}}" data-href='{{v1.href}}' data-title="{{v1.title}}"><i class="layui-icon">{{v1.ico}}</i>{{v1.title}}</a>
	  {{#  }); }}
	</script>
	
	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
		{{#  arr_foreach(d.head_toolbar, function(k1, v1){ }}
		<button class="layui-btn layui-btn-primary layui-btn-sm {{v1.event}}" lay-event="{{v1.event}}" data-href='{{v1.href}}' data-title="{{v1.title}}"><i class="layui-icon">{{v1.ico}}</i>{{v1.title}}</button>	
		{{#  }); }}
		  </div>
	</script>
	<script type="text/html" id="leftbarDemo">
	<i class="layui-icon" lay-event="spread" style="cursor:pointer;" >&#xe602;</i>  
	</script>
	
	<div id="tx_div" style="position: absolute; top: 30%;width: 88%; height: auto; overflow: hidden; min-height: 300px;  background: #fff;border: 1px solid #009688; display: none;z-index: 999999;">
		<div class="layui-tab layui-tab-card" style="margin:0px;border:none;box-shadow:none; position: relative;">
		  <div style="position: absolute;right:0px;z-index:99999;" onclick="detailsColse();"><i style="font-size: 30px;color: #f00;cursor:pointer" class="layui-icon layui-icon-close-fill"></i></div>
		  <ul class="layui-tab-title" id="detail-ul">
			  {{#  arr_foreach(d.detail, function(k1, v1){ }}
			  	<li onclick="ajaxDetail(this,'{{k1}}')">{{v1}}</li>
			  {{#  }); }}
		  </ul>
		  <div class="layui-tab-content" style="padding: 0px;">
			<div class="layui-tab-item layui-show" id="finder-content" style="margin: 0px; padding:0px;"></div>
		  </div>
		</div>
	</div>
</div>

<input type="hidden" id="menu-data" value='' />

<script src="/admin/utils/layui/layui.js" charset="utf-8"></script>
<script src="/admin/utils/layui/config.js" charset="utf-8"></script>
<script>
	layui.use(['view', 'finderTree', 'treeTable'], function() {
		let view = layui.view;
		let finderTree = layui.finderTree;
		var treeTable = layui.treeTable;
		if($_GET['fun']){
			$("#confirmSelect").css("display", "");
		}
		view.init($_GET['api']+'?_method=menu', function(res){
			$("#menu-data").val(json_encode(res.data));
			window.memuData = res.data;
			window.primaryKey = res.data.table_struct.primary_key;
			finderTree.init($_GET['api']+'?limit=50000', 'demoTreeTb', treeTable, res.data);//显示表格
			
		});
	});
</script>
</body>
</html>